<!DOCTYPE html>
<html lang="ch">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>通信网络设施管理平台-南海东部</title>
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/jquery-3.4.1.min.js"></script>
    <script src="./js/echarts.min.js"></script>
</head>

<body style="background:url(./img/nhdwork/nhdbg.jpg) no-repeat">
    <div class="tuli"></div>
    <div class="wrap">
        <div id="main" style="width: 2800px;height:2160px;"></div>
        <!-- <div class="bhgzq1"><h4 class="name">作业区A</h4></div>
        <div class="bhgzq2"><h4 class="name">作业区B</h4></div>
        <div class="bhgzq3"><h4 class="name">作业区C</h4></div>
        <div class="bhgzq4"><h4 class="name">作业区D</h4></div>
        <div class="bhgzq4"><h4 class="name">作业区E</h4></div>
        <div class="bhgzq4"><h4 class="name">作业区F</h4></div> -->
    </div>
    <div class="titbox">
        <div class="title">
           <a href="./index.html"><img src="./img/logo.png" alt="" class="logo"></a> 通信网络设施管理平台
        </div>
        <div class="llnum ">
            <div class="bhtitle">南海东部</div>
            <div class="LLleft numberbox bhbox ">
                <div class="number"><span>5000</span>M</div>
                <div class="type">总带宽</div>
            </div>
            <div class="LLright numberbox bhbox">
                <div class="number"><span>800</span>台</div>
                <div class="type">接入设备</div>
            </div>
        </div>
    </div>
    <div class="chartsbox clearfix">
        <div class="chart-left fl bgb">
            <div class="type1 clearfix" style="height: 536px">
                <div class="w100 fl">
                    <div class="charttit"><span class="icon blue"></span>本海域宽带类型占比</div>
                    <div class="piborder" style="left: 242px"></div>
                    <div id="kuandai" style="width:650;height:410px"></div>
                </div>

            </div>
            <div class="type1" style="height: 529px">
                <div class="charttit"><span class="icon blue"></span>本海域宽带冗余率</div>
                <div id="redundance" >
                    <div class="item clearfix">
                        <div class="name fl">渤海</div>
                        <div class="bar fl">
                            <div class="colorbar redundance-blue"><div class="icon" style="background:#0c9aff; "></div></div>
                        </div>
                        <div class="number fl"><span>50</span>%</div>
                    </div>
                    <div class="item clearfix">
                        <div class="name fl">东海</div>
                        <div class="bar fl">
                            <div class="colorbar redundance-green"><div class="icon"style="background:#39c783; "></div></div>
                        </div>
                        <div class="number fl"><span>50</span>%</div>
                    </div>
                    <div class="item clearfix">
                        <div class="name fl">南海东部</div>
                        <div class="bar fl">
                            <div class="colorbar redundance-yellow"><div class="icon" style="background:#fcc900; "></div></div>
                        </div>
                        <div class="number fl"><span>50</span>%</div>
                    </div>
                    
                </div>
            </div>
            <div class="type1" style="height: 498px">
                <div class="charttit"><span class="icon green"></span>实时计算自然年平均可用性</div>
                <div id="network" style="width: 1300px;height:360px;"></div>
            </div>

        </div>
        <div class="chart-right fl bgb">
            <div class="type2" style="height: 788px;">
                <div class="charttit"><span class="icon orange"></span>通信链路情况</div>
                <div class="camera lianlu">
                    <div class="item clearfix">
                        <h4 class="name fs fl">卫星</h4>
                        <div class="bar fl">
                            <div class="colorbar"style="width:30%;" ></div>
                        </div>
                        <p class="number fl"><span>130</span>条</p>
                    </div>
                    <div class="item clearfix">
                        <h4 class="name fs fl">微波</h4>
                        <div class="bar fl">
                            <div class="colorbar"style="width:30%;" ></div>
                        </div>
                        <p class="number fl"><span>130</span>条</p>
                    </div>
                    <div class="item clearfix">
                        <h4 class="name fs fl">骨干微波</h4>
                        <div class="bar fl">
                            <div class="colorbar"style="width:30%;" ></div>
                        </div>
                        <p class="number fl"><span>130</span>条</p>
                    </div>
                    <div class="item clearfix">
                        <h4 class="name fs fl">支线微波</h4>
                        <div class="bar fl">
                            <div class="colorbar"style="width:30%;" ></div>
                        </div>
                        <p class="number fl"><span>130</span>条</p>
                    </div>
                </div>
            </div>
            <div class="type1" style="height: 796px">
                <div class="charttit"><span class="icon orange"></span>设备完好率</div>
                <div id="naval" style="height: 600px"></div>
            </div>
        </div>
        <div class="chart-bottom fl bgb">
            <div class="type1" style="height: 366px;">
                <div class="charttit"><span class="icon orange"></span>资产统计</div>
                <div class="count clearfix">
                    
                </div>
            </div>
        </div>
    </div>

</body>
<script src="./js/nhd1.js"></script>

</html>